<template>
	<div id="other-nav">
		<div class="">
			<el-tree
				ref="tree"
				:data="data"
				node-key="id"
				:props="defaultProps"
				@node-click="handleNodeClick"
				draggable
				@node-contextmenu="showContentMenu"
				:allow-drop="allowDrop"
				empty-text="暂无数据"
				@node-drop="handleDrop"
			>
				<template slot-scope="{ node, data }">
					<div class="item">
						<div class="logo" v-if="data.logo" @click="handleEditSite(data)"><img :src="data.logo" /></div>
						<div class="name">{{ data.name }}</div>
						<div class="url" v-if="data.url">
							<a :href="data.url" target="_blank">{{ data.url }}</a>
						</div>
						<div class="desc">{{ data.desc }}</div>
					</div>
				</template>
			</el-tree>
		</div>
		<div class="controller-row"><el-button @click="addNode" type="primary">新增</el-button></div>
		<el-dialog title="添加网址" :visible.sync="dialogAddSiteVisible">
			<el-form :model="addSiteForm" class="addSiteDialog" ref="addSiteForm" :rules="addSiteFormRules">
				<el-form-item label="属组" label-width="120px" prop="grp">
					<el-select v-model="addSiteForm.grp" placeholder="请选择" allow-create filterable>
						<el-option v-for="item in groups" :key="item" :label="item" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="名称" label-width="120px" prop="name">
					<el-input v-model="addSiteForm.name" class="input-box" placeholder="请输入网站名称"></el-input>
				</el-form-item>
				<el-form-item label="网址" label-width="120px" prop="url"><el-input v-model="addSiteForm.url" class="input-box" placeholder="请输入网址"></el-input></el-form-item>
				<el-form-item label="logo" label-width="120px" prop="logo">
					<div class="logo-box">
						<el-input v-model="addSiteForm.logo" class="input-box" placeholder="请输入logo地址"></el-input>
						<div class="img-box" v-if="addSiteForm.logo"><img :src="addSiteForm.logo" /></div>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddSiteVisible = false">取消</el-button>
				<el-button type="primary" @click="handleAddNode">添加</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑组" :visible.sync="dialogEditGroupVisible">
			<el-form :model="editGroupForm" class="addSiteDialog" ref="editGroupForm" :rules="editGroupFormRules">
				<el-form-item label="原名称" label-width="120px" prop="rawName"><el-input v-model="editGroupForm.rawName" class="input-box" disabled></el-input></el-form-item>

				<el-form-item label="新名称" label-width="120px" prop="newName">
					<el-input v-model="editGroupForm.newName" class="input-box" placeholder="请输入新名称"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="delGroup" type="danger">删除</el-button>
				<el-button @click="dialogEditGroupVisible = false">取消</el-button>
				<el-button type="primary" @click="handleEditGroup">添加</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑网站" :visible.sync="dialogEditSiteVisible">
			<el-form :model="editSiteForm" class="addSiteDialog" ref="editSiteForm" :rules="addSiteFormRules">
				<el-form-item label="属组" label-width="120px" prop="grp">
					<el-select v-model="editSiteForm.grp" placeholder="请选择" allow-create filterable>
						<el-option v-for="item in groups" :key="item" :label="item" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="名称" label-width="120px" prop="name">
					<el-input v-model="editSiteForm.name" class="input-box" placeholder="请输入网站名称"></el-input>
				</el-form-item>
				<el-form-item label="网址" label-width="120px" prop="url"><el-input v-model="editSiteForm.url" class="input-box" placeholder="请输入网址"></el-input></el-form-item>
				<el-form-item label="描述" label-width="120px" prop="newName">
					<el-input
						type="textarea"
						resize="none"
						:autosize="{ minRows: 3, maxRows: 3 }"
						v-model="editSiteForm.desc"
						class="input-box"
						placeholder="请输入网站描述"
					></el-input>
				</el-form-item>
				<el-form-item label="logo" label-width="120px" prop="logo">
					<div class="logo-box">
						<el-input v-model="editSiteForm.logo" class="input-box" placeholder="请输入logo地址"></el-input>
						<div class="img-box" v-if="editSiteForm.logo"><img :src="editSiteForm.logo" /></div>
						<upload-image @success="editSiteForm.logo = $g.IMG_URL + $event"></upload-image>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="delSite" type="danger">删除</el-button>
				<el-button @click="dialogEditSiteVisible = false">取消</el-button>
				<el-button type="primary" @click="handleUpdateSite">修改</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { $get, $post } from '@/puigins/request.js';
import uploadImage from '@/components/common/uploadImage.vue';
export default {
	name:'Nav',
	data() {
		var validateNewName = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新名称'));
			} else if (value === this.editGroupForm.rawName) {
				callback(new Error('新名称不能与旧名称一致'));
			} else {
				callback();
			}
		};
		return {
			data: [],
			defaultProps: {
				children: 'navs',
				label: 'name'
			},
			dialogAddSiteVisible: false,
			dialogEditGroupVisible: false,
			dialogEditSiteVisible: false,
			addSiteForm: {
				grp: '',
				name: '',
				logo: '',
				url: ''
			},
			addSiteFormRules: {
				grp: [
					{
						required: true,
						message: '请选择属组',
						trigger: 'change'
					}
				],
				name: [
					{
						required: true,
						message: '请输入网站名称',
						trigger: 'change'
					}
				],
				url: [
					{
						required: true,
						message: '请输入网址',
						trigger: 'change'
					}
				],
				logo: [
					{
						required: true,
						message: '请输入网站logo',
						trigger: 'change'
					}
				]
			},
			editGroupForm: {
				rawName: '',
				newName: '',
				id: '',
				rawDesc: '',
				newDesc: ''
			},
			editGroupFormRules: {
				newName: [
					{
						validator: validateNewName,
						trigger: 'change'
					}
				]
			},
			editSiteForm: {
				id: '',
				grp: '',
				name: '',
				logo: '',
				url: '',
				desc: ''
			}
		};
	},
	methods: {
		handleNodeClick(data) {
			// console.log(data);
		},
		getData() {
			$get('/nav/getNavSite').then(res => {
				console.log(res);
				if (res.code == 200) {
					this.data = res.data;
				} else {
					this.$msgError(res);
				}
			});
		},
		addNode() {
			this.dialogAddSiteVisible = true;
			this.$nextTick(() => {
				this.$refs.addSiteForm.resetFields();
			});
		},

		handleAddNode() {
			this.$refs.addSiteForm.validate(valid => {
				if (valid) {
					$post('/admin/nav/addSite', this.addSiteForm).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data);
							this.dialogAddSiteVisible = false;
							this.getData();
						} else {
							this.$msgError(res);
						}
					});
				} else {
					return false;
				}
			});
		},
		showContentMenu(e, data, node) {
			if (typeof data.url === 'undefined') {
				this.dialogEditGroupVisible = true;
				this.$nextTick(() => {
					this.$refs.editGroupForm.resetFields();
					this.$nextTick(() => {
						this.editGroupForm.rawName = data.name;
						this.editGroupForm.newName = '';
						this.editGroupForm.id = data.grpId;
					});
				});
			}
		},
		handleEditGroup() {
			this.$refs.editGroupForm.validate(valid => {
				if (valid) {
					$post('/admin/nav/updateSiteGroup', this.editGroupForm).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data);
							this.dialogEditGroupVisible = false;
							this.getData();
						} else {
							this.$msgError(res);
						}
					});
				} else {
					return false;
				}
			});
		},
		handleEditSite(data) {
			this.dialogEditSiteVisible = true;
			this.$nextTick(() => {
				this.$refs.editSiteForm.resetFields();
				this.$nextTick(() => {
					this.editSiteForm = Object.assign({},data
					);
				});
			});
		},
		handleUpdateSite() {
			this.$refs.editSiteForm.validate(valid => {
				if (valid) {
					$post('/admin/nav/updateSite', this.editSiteForm).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data);
							this.dialogEditSiteVisible = false;
							console.log(this.editSiteForm);
							for (let i = 0; i < this.data.length; i++) {
								for (let j = 0; j < this.data[i].navs.length; j++) {
									let item = this.data[i].navs[j];
									if (item.id === this.editSiteForm.id) {
										console.log(item, this.editSiteForm);
										Object.assign(item, this.editSiteForm);
										return;
									}
								}
							}
							console.log('没有找到');
							// this.getData();
						} else {
							this.$msgError(res);
						}
					});
				} else {
					return false;
				}
			});
		},
		allowDrop(draggingNode, dropNode, type) {
			// console.log("draggingNode",draggingNode)
			// console.log("dropNode",dropNode)
			if (draggingNode.data.navs) {
				//组移动，只允许到其他组前或后
				if (dropNode.data.navs) {
					return type === 'next' || type === 'prev';
				} else {
					return false;
				}
			} else {
				//项目移动，只允许移动到其他组里，或其他项目前后
				if (dropNode.data.navs) {
					return type === 'inner';
				} else {
					return type === 'next' || type === 'prev';
				}
			}
			return false;
		},
		handleDrop(draggingNode, dropNode, dropType, ev) {
			if (draggingNode.data.navs) {
				console.log('组移动', draggingNode.data.name, dropType, dropNode.data.name);
				$post('/admin/nav/moveGroup', {
					grp: draggingNode.data.name,
					target: dropNode.data.name,
					type: dropType
				}).then(res => {
					if (res.code == 200) {
						this.$message.closeAll();
						this.$message.success(res.data);
					} else {
						this.$msgError(res);
					}
				});
			} else {
				console.log('item移动', draggingNode, dropNode, dropType);
				if (dropType === 'inner') {
					$post('/admin/nav/moveItem', {
						id: draggingNode.data.id,
						target: dropNode.data.grpId,
						type: dropType
					}).then(res => {
						if (res.code == 200) {
							this.$message.closeAll();
							this.$message.success(res.data);
						} else {
							this.$msgError(res);
						}
					});
				} else {
					$post('/admin/nav/moveItem', {
						id: draggingNode.data.id,
						target: dropNode.data.id,
						type: dropType
					}).then(res => {
						if (res.code == 200) {
							this.$message.closeAll();
							this.$message.success(res.data);
						} else {
							this.$msgError(res);
						}
					});
				}
			}
		},
		async delGroup() {
			let res = await this.$confirm('确定删除分组<' + this.editGroupForm.rawName + '>?', '提示').catch(e => {});
			if (res) {
				let obj = this.data.find(item => item.grpId === this.editGroupForm.id);
				if (obj && obj.navs && obj.navs.length > 0) {
					res = await this.$confirm(`组<${this.editGroupForm.rawName}>是非空的,删除后元素会被设为<未分组>,是否继续?`, '提示').catch(e => {});
				}
				if (res) {
					res = await $post('/admin/nav/delSiteGroup', {
						id: this.editGroupForm.id
					});
					if (res.code == 200) {
						this.dialogEditGroupVisible = false;
						this.$message.success('已删除:' + this.editGroupForm.rawName);
						this.getData();
					} else {
						this.$msgError(res);
					}
				}
			}
		},
		delSite() {
			this.$confirm('确定删除网站<' + this.editSiteForm.name + '>?', '提示')
				.then(_ => {
					$post('/admin/nav/delSite', {
						id: this.editSiteForm.id
					}).then(res => {
						if (res.code == 200) {
							this.dialogEditSiteVisible = false;
							this.$message.success('已删除:' + this.editSiteForm.name);
							this.$refs.tree.remove(this.editSiteForm);
							// this.getData();
						} else {
							this.$msgError(res);
						}
					});
				})
				.catch(e => {});
		}
	},
	created() {
		this.getData();
	},
	computed: {
		groups() {
			let arr = [];
			this.data.forEach(item => arr.push(item.name));
			return arr;
		}
	},
	components: {
		uploadImage
	}
};
</script>

<style lang="scss">
#other-nav {
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15px;

		.logo {
			width: 30px;
			height: 30px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
		}

		.name {
		}

		.url {
			font-style: italic;
		}
	}

	.el-tree-node__children[role='group'] {
		padding: 5px 0;

		.el-tree-node[role='treeitem'] {
			padding: 5px 0;
		}
	}

	.controller-row {
		padding: 30px;
	}
}

.addSiteDialog {
	.input-box {
		max-width: 400px;
	}

	.logo-box {
		display: flex;
		// gap:20px;
		align-items: center;

		.img-box {
			width: 40px;
			height: 40px;
			margin: 0 20px;

			img {
				width: 100%;
				height: 100%;
				border: 1px solid #000;
				border-radius: 10px;
			}
		}
	}
}
</style>
